<template>
  <div class="the-order">
    <div v-if="show">
      <van-form ref="form">
        <van-cell-group :border="false">
          <van-cell is-link center @click="addressHandle('send')">
            <template #icon>
              <p class="circle send">寄</p>
            </template>
            <template #title>
              <span class="custom-title" v-if="!form.send.tel">请填写寄件人信息</span>
              <span>{{form.send.name}}</span>
              <span>{{form.send.tel}}</span>
            </template>
            <template #label>
              <span>{{form.send.province + form.send.city + form.send.county + form.send.addressDetail}}</span>
            </template>
          </van-cell>
          <van-cell is-link center @click="addressHandle()">
            <template #icon>
              <p class="circle receive">收</p>
            </template>
            <template #title>
              <span class="custom-title" v-if="!form.receive.tel">请填写收件人信息</span>
              <span>{{form.receive.name}}</span>
              <span>{{form.receive.tel}}</span>
            </template>
            <template #label>
              <span>{{form.receive.province + form.receive.city  + form.receive.county + form.receive.addressDetail}}</span>
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group :border="false" class="info-list">
          <van-field
            readonly
            clickable
            name="寄件信息"
            :value="form.sendSelect"
            label="寄件信息"
            placeholder="点击选择寄件信息"
            right-icon="arrow"
            :rules="[{ required: true, message: '请选择寄件信息' }]"
            @click="showSendSelect = true"
          />
          <van-field
            readonly
            clickable
            right-icon="arrow"
            name="快递公司"
            :value="form.companySelect"
            :rules="[{ required: true, message: '请选择快递公司' }]"
            label="选择快递公司"
            placeholder="点击选择快递公司"
            @click="showCompanySelect = true"
          />
          <van-field
            v-model="form.message"
            name="备注"
            rows="2"
            autosize
            label="备注"
            type="textarea"
            maxlength="50"
            placeholder="请输入备注信息"
            show-word-limit
          />
        </van-cell-group>
      </van-form>
      <van-popup v-model="showSendSelect" position="bottom">
        <van-picker
          show-toolbar
          :columns="sendSelectOpt"
          @confirm="onConfirm"
          @cancel="showSendSelect = false"
        />
      </van-popup>
      <van-popup v-model="showCompanySelect" position="bottom">
        <van-picker
          show-toolbar
          :columns="companySelectOpt"
          @confirm="onConfirm"
          @cancel="showCompanySelect = false"
        />
      </van-popup>
      <van-submit-bar
        :price="totalPrice * 100"
        button-text="立即下单"
        @submit="submitBar"
      />
    </div>
    <van-address-edit
      v-else
      delete-button-text="取消"
      :address-info="isSendAddr ? form.send : form.receive"
      :area-list="areaList"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
    >
    <div class="address-back">
      <van-button block round @click="() => show = true">取消</van-button>
    </div>
    </van-address-edit>
  </div>
</template>

<script>
import {
  Cell,
  CellGroup,
  SubmitBar,
  Toast,
  Form,
  Field,
  Picker,
  Popup,
  Button,
  AddressEdit,
} from 'vant'
import { areaList } from '@vant/area-data'
export default {
  components: {
    [SubmitBar.name]: SubmitBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Form.name]: Form,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [AddressEdit.name]: AddressEdit,
  },

  data() {
    return {
      show: true,
      isSendAddr: false,
      areaList,
      form: {
        send: {
          name: '章三',
          tel: '18757131654',
          addressDetail: '我是详细地址',
          areaCode: '130102',
          city: '石家庄市',
          county: "长安区",
          province: '河北省'
        },
        receive: {
          name: '里斯',
          addressDetail: '我是详细地址',
          tel: '18757131654',
          areaCode: '130102',
          city: '石家庄市',
          county: "长安区",
          province: '河北省'

        },
        sendSelect: '',
        companySelect: '',
        message: '',
      },
      showSendSelect: false,
      showCompanySelect: false,
      sendSelectOpt: ['1寄件信息', '2寄件信息'],
      companySelectOpt: ['中通', '顺丰'],
    }
  },

  computed: {
    totalPrice() {
      return 9
    },
  },

  methods: {
    // 立即下单按钮，校验，获取表单数据
    async submitBar() {
      await this.$refs.form.validate()
      if (!this.form.send.tel || !this.form.receive.tel) {
        return Toast('请完善寄件收件信息')
      }
      console.log(this.form)
      Toast('点击立即下单')
    },
    // 下拉选的选定事件
    onConfirm(value) {
      this.showSendSelect && (this.form.sendSelect = value)
      this.showCompanySelect && (this.form.companySelect = value)
      this.showSendSelect = false
      this.showCompanySelect = false
    },
    // 寄件收件地址信息编辑
    addressHandle(isSend) {
      this.isSendAddr = !!isSend
      this.show = false
    },
    // 地址信息编辑点击保存
    onSave(val) {
      console.log(val)
      this.isSendAddr && (this.form.send = val)
      !this.isSendAddr && (this.form.receive = val)
      this.show = true
    }
  },
}
</script>

<style lang="less" scoped>
.the-order {
  .circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #07c160;
    text-align: center;
    color: #fff;
    line-height: 36px;
    margin-right: 10px;
  }
  .receive {
    background: #1989fa;
  }
  .info-list {
    background: transparent;
    padding: 10px;
  }
  .custom-title {
    color: #c8c9cc
  }
  .van-address-edit {
    padding: 0;
  }
  .address-back {
    padding: 20px 4px 0 4px;
  }
}
</style>
